<div class="fsh-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <div class="layui-row wxmp-card-wrap">
            <div class="layui-col-md4">
                <div class="wxmp-card">
                    <i class="iconfont icon-pic"></i>
                    <div class="card-panel-description">
                        <div class="card-panel-text">文章数</div>
                        <div class="card-panel-num">1224</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="wxmp-card">
                    <i class="iconfont icon-tongji"></i>
                    <div class="card-panel-description">
                        <div class="card-panel-text">粉丝数</div>
                        <div class="card-panel-num">1224</div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="wxmp-card">
                    <i class="iconfont icon-daohang-gongzhonghaotixing"></i>
                    <div class="card-panel-description">
                        <div class="card-panel-text">昨日访问</div>
                        <div class="card-panel-num">1224</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="chart-content">
            <div class="chart" id="chart1">

            </div>
        </div>
        <div class="layui-row" style="margin-left: -20px;margin-right: -20px;">
            <div class="layui-col-md4">
                <div style="padding-left: 16px;padding-right: 16px;">
                    <div class="chart-content">
                        <div class="chart" id="chart2">

                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div style="padding-left: 16px;padding-right: 16px;">
                    <div class="chart-content">
                        <div class="chart" id="chart3">

                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div style="padding-left: 16px;padding-right: 16px;">
                    <div class="chart-content">
                        <div class="chart" id="chart4">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>最新文章</legend>
            </fieldset>
            <div style="padding: 10px;background: #fff;border-radius: 5px;">
                <table id="list_table" class="layui-hide" lay-filter="mainList"></table>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['layer',"table"], function () {
        var layer = layui.layer;
        var table = layui.table;
        $(".card-panel-num").each(function () {
            var $this=$(this);
            var num=parseFloat($this.text()) || 0;
            var now=0,step=parseInt(num/60);
            var i=setInterval(function () {
                if(now<num){
                    $this.text(now);
                }else{
                    $this.text(num);
                    clearInterval(i);
                }
                now+=step;
            },20);
        });

        var tableObj = table.render({
            id: 'list_table',
            elem: '#list_table',
            url: '/views/test/data/data.json',
            align: "center",
            cols: [[ //表头
                {type: 'numbers'},
                {field: 'title', title: '标题', width: 150, align: 'center',},
                {field: 'content', title: '消息描述', align: 'center',},
                {
                    field: 'lock', title: '操作', width: 150, align: 'center', templet: function (d) {
                    return '<a class="font-primary2" href="#">查看</a>';
                }, unresize: true, align: 'center'
                }
            ]],
            page:false
        });
        util.loadJs([
            "/js/plugin/echarts/echarts.min.js",
            "/js/plugin/echarts/macarons.js"
        ],function () {

            var expectedData=[100, 120, 161, 134, 105, 160, 165];
            var actualData=[120, 82, 91, 154, 162, 140, 145];

            // 折线图
            var chart1= echarts.init($("#chart1")[0], 'macarons');
            chart1.setOption({
                xAxis: {
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    boundaryGap: false,
                    axisTick: {
                        show: false
                    }
                },
                grid: {
                    left: 10,
                    right: 10,
                    bottom: 20,
                    top: 30,
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    },
                    padding: [5, 10]
                },
                yAxis: {
                    axisTick: {
                        show: false
                    }
                },
                legend: {
                    data: ['expected', 'actual']
                },
                series: [{
                    name: 'expected', itemStyle: {
                        normal: {
                            color: '#FF005A',
                            lineStyle: {
                                color: '#FF005A',
                                width: 2
                            }
                        }
                    },
                    smooth: true,
                    type: 'line',
                    data: expectedData,
                    animationDuration: 2800,
                    animationEasing: 'cubicInOut'
                },
                    {
                        name: 'actual',
                        smooth: true,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#3888fa',
                                lineStyle: {
                                    color: '#3888fa',
                                    width: 2
                                },
                                areaStyle: {
                                    color: '#f3f8ff'
                                }
                            }
                        },
                        data: actualData,
                        animationDuration: 2800,
                        animationEasing: 'quadraticOut'
                    }]
            });

            // 雷达图
            var chart2= echarts.init($("#chart2")[0], 'macarons');
            chart2.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                radar: {
                    radius: '66%',
                    center: ['50%', '42%'],
                    splitNumber: 8,
                    splitArea: {
                        areaStyle: {
                            color: 'rgba(127,95,132,.3)',
                            opacity: 1,
                            shadowBlur: 45,
                            shadowColor: 'rgba(0,0,0,.5)',
                            shadowOffsetX: 0,
                            shadowOffsetY: 15
                        }
                    },
                    indicator: [
                        { name: 'Sales', max: 10000 },
                        { name: 'Administration', max: 20000 },
                        { name: 'Information Techology', max: 20000 },
                        { name: 'Customer Support', max: 20000 },
                        { name: 'Development', max: 20000 },
                        { name: 'Marketing', max: 20000 }
                    ]
                },
                legend: {
                    left: 'center',
                    bottom: '10',
                    data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
                },
                series: [{
                    type: 'radar',
                    symbolSize: 0,
                    areaStyle: {
                        normal: {
                            shadowBlur: 13,
                            shadowColor: 'rgba(0,0,0,.2)',
                            shadowOffsetX: 0,
                            shadowOffsetY: 10,
                            opacity: 1
                        }
                    },
                    data: [
                        {
                            value: [5000, 7000, 12000, 11000, 15000, 14000],
                            name: 'Allocated Budget'
                        },
                        {
                            value: [4000, 9000, 15000, 15000, 13000, 11000],
                            name: 'Expected Spending'
                        },
                        {
                            value: [5500, 11000, 12000, 15000, 12000, 12000],
                            name: 'Actual Spending'
                        }
                    ],
                    animationDuration: 3000
                }]
            });

            //饼图
            var chart3= echarts.init($("#chart3")[0], 'macarons');
            chart3.setOption({
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    bottom: '10',
                    data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
                },
                calculable: true,
                series: [
                    {
                        name: 'WEEKLY WRITE ARTICLES',
                        type: 'pie',
                        roseType: 'radius',
                        radius: [15, 95],
                        center: ['50%', '38%'],
                        data: [
                            { value: 320, name: 'Industries' },
                            { value: 240, name: 'Technology' },
                            { value: 149, name: 'Forex' },
                            { value: 100, name: 'Gold' },
                            { value: 59, name: 'Forecasts' }
                        ],
                        animationEasing: 'cubicInOut',
                        animationDuration: 2600
                    }
                ]
            });

            // 柱状图
            var chart4= echarts.init($("#chart4")[0], 'macarons');
            chart4.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    top: 10,
                    left: '2%',
                    right: '2%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisTick: {
                        show: false
                    }
                }],
                series: [{
                    name: 'pageA',
                    type: 'bar',
                    stack: 'vistors',
                    barWidth: '60%',
                    data: [79, 52, 200, 334, 390, 330, 220],
                    animationDuration:6000
                }, {
                    name: 'pageB',
                    type: 'bar',
                    stack: 'vistors',
                    barWidth: '60%',
                    data: [80, 52, 200, 334, 390, 330, 220],
                    animationDuration:6000
                }, {
                    name: 'pageC',
                    type: 'bar',
                    stack: 'vistors',
                    barWidth: '60%',
                    data: [30, 52, 200, 334, 390, 330, 220],
                    animationDuration:6000
                }]
            });
        });
    })
</script>

